<template>
  <div class="calendar">
    <!-- <div class="title">日历</div> -->
    <div class="title">{{ $t('dashboard.mytitle') }}</div>
    <div class="time">
      <el-select v-model="year" @change="changeDate">
        <el-option
          v-for="item in yearArr"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select v-model="month" @change="changeDate">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <el-calendar v-model="date">
      <template slot="dateCell" slot-scope="{ date }">
        <!-- <el-button @click="a(date, data)">zhes</el-button> -->
        <!-- <span :class="data.isSelected ? 'is-selected' : ''"> -->
        <span class="day">
          {{ date | turnTime }}
          <!-- {{ data.isSelected ? '✔️' : '' }} -->
        </span>
        <span v-if="isWeek(date)" class="xiu"> 休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
// import { now } from 'moment'

export default {
  filters: {
    turnTime(value) {
      var date = new Date(value)
      return date.getDate()
    }
  },
  props: {
    timeDate: {
      type: Date,
      default: function() {
        return new Date()
      }
    }
  },
  data() {
    return {
      year: '',
      month: '',
      date: new Date(),
      yearArr: []
    }
  },
  watch: {
    timeDate: {
      immediate: true,
      deep: true,
      handler: function(newValue) {
        var _time = new Date(newValue)
        // if()
        this.year = _time.getFullYear()
        this.month = _time.getMonth() + 1
        this.getYear(this.year)
      }
    }
  },
  created() {
    // console.log(this.yearArr)
    // console.log(this.year)
  },
  methods: {
    // a(date, data) {
    //   console.log(date)
    //   console.log(data)
    // }
    changeDate() {
      var _time = new Date()

      var year = _time.getFullYear()
      var month = _time.getMonth() + 1
      if (this.year === year && this.month === month) {
        this.date = new Date()
      } else {
        this.date = new Date(`${this.year}/${this.month}/01`)
      }
      console.log(this.year)
    },
    getYear(year) {
      var max = year + 5
      var min = year - 5
      for (let i = min; i <= max; i++) {
        this.yearArr.push(i)
      }
    },
    isWeek(date) {
      var _time = new Date(date)

      var year = _time.getFullYear()
      var month = _time.getMonth() + 1
      if (year === this.year && month === this.month) {
        var week = _time.getDay()

        // if()
        // console.log();
        if (week === 6 || week === 0) {
          return true
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.calendar {
  .title {
    padding: 8px 8px 18px 8px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .time {
    text-align: right;
    .el-select {
      height: 30px;
      line-height: 30px;
      width: 150px;
      margin-right: 10px;
      margin-bottom: 8px;
    }
  }
  ::v-deep .el-calendar__header {
    display: none;
  }
  ::v-deep .el-calendar__body th {
    font-weight: 700;
  }
  ::v-deep .el-calendar__body th:nth-child(6),
  ::v-deep .el-calendar__body th:nth-child(7) {
    color: #fa7c4d;
  }
  ::v-deep .el-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ::v-deep .prev,
  ::v-deep .current,
  ::v-deep .next {
    border: none;
    position: relative;
  }
  ::v-deep .is-today span.day {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background: skyblue;
    color: #fff;
    border-radius: 50%;
  }
  .xiu {
    position: absolute;
    // display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background: #fa7c4d;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    // margin-left: 10px;
    right: 11px;
    top: 9px;
  }
}
</style>
